<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>Welcome to SoroShop · Soro</title>
    <style type="text/css">

        body {
            width: 100%;
            min-width: 1000px;
        }


        header {
            padding: 40px 60px;
        }

        main {
            padding: 10px 60px 40px;
        }



        .logo {
            font-size: 35px;
            font-weight: bold;
        }

        .header_lockup {
            height: 50px;
        }

        .header_item1 {
            display: inline-block;
            padding: 0;
            height: 50px;
        }

        .header_item2 {
            display: inline-block;
            height: 50px;
            width: 800px;
            float: right;
            font-family: 'Lantinghei SC', 'STSong', serif;
            padding-top: 20px;
        }

        .top-list {
            float: right;
        }

        .top-list_item {
            float: left;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        /*上面是header*/
        /*footer {
            border-top-style: solid;
            border-width: thin;
            height: 100px;
            padding: 40px 60px;
        }*/
        footer {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: block;
            width: 100%;
            margin-right: auto;
            margin-left: auto;
            transition: transform .3s ease-in-out;
            border-top: 1px solid #ededed;
            background-color: #fff;
            letter-spacing: .5px;
            position: relative;
            z-index: 90;
            padding: 50px 60px;
        }

        .d-sm-flex {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: flex!important;
            flex-wrap: nowrap!important;
            justify-content: space-between!important;
        }

        .ps-footer__main {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        .p-div {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: block;
            min-height: 32px;
            margin-bottom: 30px;
        }

        .p-list {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            align-items: flex-start;
        }

        .p-list__item {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            list-style: none;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            padding: 0 15px;
            white-space: nowrap;
            padding-left: 0;
        }

        .ps-footer__extra {
            padding-right: 35px;
        }



        /*上面是footer*/

        .left-list {
            list-style: none;
            margin: 0;
            padding-left: 0;
        }

        .left-list_item {
            font-weight: bolder;
            font-size: 18px;
            padding-top: 20px;
        }

        .row {
            width: 100%;
        }

        .col1 {
            vertical-align: top;
            display: inline-block;
            padding: 0 110px 0 0;
        }

        .col2 {
            display: inline-block;
            padding: 10px 0;
        }

        .picture-frame {
            padding-right: 150px;
            background-image: url("../static/1-1-2副本-1-1920x1001.jpg");
            width: 1300px;
            height: 500px;
            margin-bottom: 50px;
        }

        .focus-product {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 25px;
        }

        .p-row {
            width: 1500px;
        }

        .p {
            height: 350px;
            width: 350px;
            padding: 30px 15px 0 0;
            display: inline-block;
            margin-bottom: 200px;
            margin-top: 30px;
        }

        .p1 {
            height: 350px;
            width: 350px;
            background-image: url("../static/雪屋-白-600x600.jpg");
            background-size: 350px 350px;
        }

        .p2 {
            height: 350px;
            width: 350px;
            background-image: url("../static/猫粮 固体罐头.jpg");
            background-size: 350px 350px;
        }

        .p3 {
            height: 350px;
            width: 350px;
            background-image: url("../static/p3.jpg");
            background-size: 350px 350px;
        }

        .p4 {
            height: 350px;
            width: 350px;
            background-image: url("../static/p4.jpg");
            background-size: 350px 350px;
        }

        .p5 {
            height: 350px;
            width: 350px;
            background-image: url("../static/p5.jpg");
            background-size: 350px 350px;
        }

        .p6 {
            height: 350px;
            width: 350px;
            background-image: url("../static/活性炭猫砂.jpg");
            background-size: 350px 350px;
        }

        .p7 {
            height: 350px;
            width: 350px;
            background-image: url("../static/p7.jpg");
            background-size: 350px 350px;
        }

        .p8 {
            height: 350px;
            width: 350px;
            background-image: url("../static/宠物玩具 毛线球.jpg");
            background-size: 350px 350px;
        }

        .p_item1 {
            margin-bottom: 20px;
        }

        .p_item2 {
            padding-bottom: 20px;
            display: inline-block;
            width: 350px;
        }

        .p_item2 div {
            display: inline-block;
        }

        .details {
            margin: 0 10px;
            float: right;
        }

        .p_item3 {
            width: 350px;
        }

        .title {
            margin: 0 10px;
        }

        .price {
            margin: 0 10px;
            padding: 10px 0;
            display: inline-block;
        }

        .layui-btn {
            display: inline-block;
            float: right;
        }

        .sort-line {
            float: right;
        }

        .p_item3 {
            float: right;
        }
    </style>

    <script th:inline="javascript">
        var userId = 0;
        var productId = 5;
        var amount = 1;

        if([[${session.userId}]] != null) {
            userId = [[${session.userId}]];
        }

        function f(p, userId, productId, amount) {
            document.getElementById(p).setAttribute("href", "/add_item?userId=" + userId
                + "&productId=" + productId + "&amount=" + amount);
            alert("添加成功");
        }

        function p1() {
            f("p1", userId, 5 , 1);
        }

        function p2() {
            f("p2", userId, 14, 1);
        }

        function p3() {
            f("p3", userId, 2, 1);
        }

        function p4() {
            f("p4", userId, 3, 1);
        }

        function p5() {
            f("p5", userId, 4, 1);
        }

        function p6() {
            f("p6", userId, 15, 1);
        }

        function p7() {
            f("p7", userId, 7, 1);
        }

        function p8() {
            f("p8", userId, 13, 1);
        }
    </script>
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
</head>
<body>
<header class="header">
    <div class="header_lockup">
        <div class="header_item1">
            <a class="logo">Soro</a></div>
        <div class="header_item2">
            <ul class="top-list">
                <li class="top-list_item" style="padding-right: 50px"><a href="/">首页</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/shop">产品</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/appointment">上门预约</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/about">关于我们</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/join">注册</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/cart">购物车</a></li>
                <li class="top-list_item" style="margin-right: 30px">
                    <a href="/personal" th:if="${session.username != null}" th:text="${session.username}">登录</a>
                    <a href="/login" th:if="${session.username == null}">登录</a>
                </li>
                <li class="top-list_item"><a href="/logout" th:if="${session.username != null}">退出</a></li>
            </ul>
        </div>
    </div>
</header>
<main>
    <div class="row">
        <div class="col1">
            <ul class="left-list">
                <li class="left-list_item"><a href="/cat">猫专区</a></li>
                <li class="left-list_item"><a href="/dog">狗专区</a></li>
                <li class="left-list_item"><a href="/date">宠物相亲</a></li>
            </ul>
        </div>
        <div class="col2">
            <div class="picture-frame"></div>
            <div class="focus-product">猫专区</div>
            <div class="p-row">
                <div class="p">
                    <div class="p_item1">
                        <div class="p1"></div>
                    </div>
                    <div class="p_item2">
                        <div class="title">猫砂屋 雪屋款</div>
                        <div class="details">白色</div>
                    </div>
                    <div class="p_item3">
                        <div class="price">&yen;99</div>
                        <a href="javascript:void(0);" class="layui-btn" id="p1" onclick="p1()">加入购物车</a>
                    </div>
                </div>

                <div class="p">
                    <div class="p_item1">
                        <div class="p2"></div>
                    </div>
                    <div class="p_item2">
                        <div class="title">猫粮 固体罐头</div>
                        <div class="details">500g</div>
                    </div>
                    <div class="p_item3">
                        <div class="price">&yen;89</div>
                        <a href="javascript:void(0);" class="layui-btn" id="p2" onclick="p2()">加入购物车</a>
                    </div>
                </div>

                <div class="p">
                    <div class="p_item1">
                        <div class="p3"></div>
                    </div>
                    <div class="p_item2">
                        <div class="title">普通猫粮</div>
                        <div class="details">2.5kg</div>
                    </div>
                    <div class="p_item3">
                        <div class="price">&yen;100</div>
                        <a href="javascript:void(0);" class="layui-btn" id="p3" onclick="p3()">加入购物车</a>
                    </div>
                </div>

                <div class="p">
                    <div class="p_item1">
                        <div class="p4"></div>
                    </div>
                    <div class="p_item2">
                        <div class="title">逗猫草</div>
                        <div class="details">浣熊款</div>
                    </div>
                    <div class="p_item3">
                        <div class="price">&yen;150</div>
                        <a href="javascript:void(0);" class="layui-btn" id="p4" onclick="p4()">加入购物车</a>
                    </div>
                </div>

                <div class="p">
                    <div class="p_item1">
                        <div class="p5"></div>
                    </div>
                    <div class="p_item2">
                        <div class="title">猫薄荷</div>
                        <div class="details">500g</div>
                    </div>
                    <div class="p_item3">
                        <div class="price">&yen;200</div>
                        <a href="javascript:void(0);" class="layui-btn" id="p5" onclick="p5()">加入购物车</a>
                    </div>
                </div>

                <div class="p">
                    <div class="p_item1">
                        <div class="p6"></div>
                    </div>
                    <div class="p_item2">
                        <div class="title">活性炭猫砂</div>
                        <div class="details">1kg</div>
                    </div>
                    <div class="p_item3">
                        <div class="price">&yen;69</div>
                        <a href="javascript:void(0);" class="layui-btn" id="p6" onclick="p6()">加入购物车</a>
                    </div>
                </div>

                <div class="p">
                    <div class="p_item1">
                        <div class="p7"></div>
                    </div>
                    <div class="p_item2">
                        <div class="title">猫仔衫 潮牌 英伦风</div>
                        <div class="details">XXL</div>
                    </div>
                    <div class="p_item3">
                        <div class="price">&yen;399</div>
                        <a href="javascript:void(0);" class="layui-btn" id="p7" onclick="p7()">加入购物车</a>
                    </div>
                </div>

                <div class="p">
                    <div class="p_item1">
                        <div class="p8"></div>
                    </div>
                    <div class="p_item2">
                        <div class="title">宠物玩具 毛线球</div>
                        <div class="details">小款</div>
                    </div>
                    <div class="p_item3">
                        <div class="price">&yen;39</div>
                        <a href="javascript:void(0);" class="layui-btn" id="p8" onclick="p8()">加入购物车</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<footer class="container-fluid ps-footer p-wrap">
    <div class="ps-header__slogan">美好宠物生活	Live with pet better</div>
    <div class="d-sm-flex justify-content-sm-between flex-nowrap">
        <div class="ps-footer__main">
            <div class="p-div">
            </div>
            <nav class="p-div"><ul class="p-list">
                <li class="p-list__item">
                    <a href="/">首页</a>
                </li>
                <li class="p-list__item">
                    <a href="/shop">产品</a>
                </li>
                <li class="p-list__item">
                    <a href="/appointment">上门预约</a>
                </li>
                <li class="p-list__item">
                    <a href="/about">关于我们</a>
                </li>
                <li class="p-list__item">
                    <a href="/join">注册</a>
                </li>
                <li class="p-list__item">
                    <a href="/cart">购物车</a>
                </li>
                <li class="p-list__item ps-lang">
                    <a href="/personal">个人中心</a>
                </li>
            </ul> </nav>
            <div><a href="http://www.beian.miit.gov.cn" target="_blank">粤ICP备15057691号-2</a> Copyright © 2020 Soro Co.,Ltd. 瘦肉宠物用品（广东）有限公司</div>
        </div>
        <div class=" ps-footer__extra">
            <div class="p-div"></div>
            <div class="p-div"></div>
            <div class="p-div" style="float: bottom">服务热线：+86 400-920-0674<span class="ps-flag"></span></div>
        </div>
    </div>
</footer>
</body>

</html>